<template>
    <div class="home">
        <div class="scrape-box">
            <table class="prize-table">
                <colgroup>
                    <col v-for="index of colNum" style="width: 120px;">
                </colgroup>
                <tbody>
                <tr v-for="item in prizes">
                    <td v-for="child in item">
                        {{ getPrize(child.val) }}
                    </td>
                </tr>
                </tbody>
            </table>
            <table class="coating-table">
                <colgroup>
                    <col v-for="index of colNum" style="width: 120px;">
                </colgroup>
                <tbody>
                <tr v-for="item in prizes">
                    <td v-for="(child, index) in item">
                        <canvas :id="'coating' + index"></canvas>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>

export default {
    name: 'Home',
    data() {
        return {
            rowNum: 5,
            colNum: 5,
            prizes: [{
                val: ''
            }]
        }
    },
    methods: {
        produce() {
            this.prizes = [];
            const allNum = this.colNum * this.rowNum;
            for (let i = 0; i < allNum; i++) {
                const index = parseInt(String(i / this.colNum));
                if (!this.prizes[index]) {
                    this.prizes[index] = [];
                }
                this.prizes[index].push({
                    val: this.$math.random(30000)
                });
            }
        },
        getPrize(num) {
            if (num === 1500) {
                return "一等奖";
            } else if ((num > 10000 && num < 12000) || (num > 20000 && num < 22000)) {
                return "二等奖";
            } else if ((num > 1000 && num < 5000) || (num > 15000 && num < 18000)) {
                return "三等奖";
            } else {
                return "谢谢";
            }
        }
    },
    created() {
        this.produce();
        console.log(this.prizes)
    }
}
</script>
<style lang="scss" scoped>
table {
    border-collapse: collapse;
    margin-left: 50%;
    transform: translateX(-50%);

    tbody tr {
        td {
            height: 60px;
            border: 1px solid #cdced0;
            vertical-align: middle;
            text-align: center;
        }
    }
}

.scrape-box {
    position: relative;
    margin-top: 100px;

    .coating-table {
        position: absolute;
        top: 0;
        left: 0;
    }
}
</style>